<template>
  <div class="editPersInfo-warpper">
    <div class="topBox">
      <span>基本信息</span>
    </div>
    <div class="fengeBar"></div>
    <div class="groupBox">
      <div class="slotBox flex" slot="label">
        <img  src="../assets/images/sex_icon.png" class="ii">
         <popup v-model="popshow">
        <!-- group already has a top border, so we need to hide header's bottom border-->
              <popup-header
              left-text="取消"
              right-text="确认"
              title="请选择您的性别"
              :show-bottom-border="false"
              @on-click-left="popshow = false"
              @on-click-right="popshow = false"></popup-header>
              <group gutter="0">
                <radio :options="getMyKeyon" @on-change="change"></radio>
              </group>
         </popup>
         <cell class="sex" title="性别" :value="keyontext" is-link @click.native="getcouponUser()"></cell>
    
      </div>
      <x-input type="text"  show-clear v-model="userInfor.nickname">
        <div class="slotBox flex" slot="label">
          <img  src="../assets/images/nickname_icon.png">
          <span>昵称:</span>
        </div>
      </x-input>
      <x-input type="text"  show-clear v-model="userInfor.introduction">
        <div class="slotBox flex" slot="label">
          <img  src="../assets/images/intro_icon.png">
          <span>简介:</span>
        </div>
      </x-input>
    </div>
    <div class="next-box flex">
      <div @click="submitInfo">保存</div>
    </div>
  </div>
</template>

<script>
  import axios from '@/api/request'
  import { Group,XInput,
    Cell,
    CellBox,
    PopupHeader, 
    Popup,
    Radio } from "vux";

  export default {
    name: '',
    components: {
      Group,
      XInput,
      Cell,
      CellBox,
      PopupHeader, 
      Popup,
      Radio
    },
    data () {
      return {
         getMyKeyon:[
             {
               value:'男',
               key:1
             },{
               value:'女',
               key:2
             }
           ],
            popshow:false,
            keyontext:'',
        userInfor:{
           nickname: '',
           sex: '',
           introduction: '',
           id:this.$route.query.userId,
          
          
        },
       
      }
    },
    created(){
      this.getuserInfor()
    },
    mounted(){

      
    },
    methods:{
    change(value, label){
         var self=this
         self.keyontext=label
         self.userInfor.sex=value
       },
      getcouponUser(){
        this.popshow=true
      },
      getuserInfor(){   
      var self=this
          axios('device/userEntity/get/'+self.$route.query.userId,'post',{}).then(res=>{
           if(res.data.code==1000){
               self.userInfor.nickname=res.data.data.nickname
               if(res.data.data.sex==1){
                self.keyontext="男"
               }else if(res.data.data.sex==2){
                self.keyontext="女"
               }
               self.userInfor.introduction=res.data.data.introduction
             }
         })
      },
      submitInfo(){
        var self=this
        console.log(self.userInfor)
         axios('/device/userEntity/update','post',self.userInfor).then(res=>{
           if(res.data.code==1000){
              this.$vux.toast.text('修改成功')
               this.$router.push({path: '/personCenter',query:{userId:self.$route.query.userId}})
           }
         })
      },
    }

  };
</script>

<style >
  
    body{
        position: absolute;
        left: 0;
        top: 0;
        /*background: rgb(244,244,244);*/
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
  body .editPersInfo-warpper .groupBox .sex{
      padding-left:0;

    }
    .editPersInfo-warpper .weui-cells.vux-no-group-title{
      margin-top: 0;
    }
    .editPersInfo-warpper .weui-cells:before{
      border-top: 0;
    }
    .editPersInfo-warpper input::-webkit-input-placeholder{
      color: #aaa;
      font-size: 30rem/75;
    }
</style>
<style lang="less" scoped>
.ii{
   margin-left: 0.50666667rem;
      box-sizing: border-box;
}
.flex{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
}
  .editPersInfo-warpper{
    height: 100%;
    box-sizing: border-box;
    background: #fff;
    .weui-cells .weui-cell:before {
      left: 0;
      border-top: 0;
    }
    .weui-cell {
      padding-left: 38rem/75;
      border-bottom: 1px solid #ddd;
      width:100%;
    }
    .vux-x-input.weui-cell{
      height: 85rem/75;
      padding-top: 18rem/75;
      padding-bottom: 0;
    }
    .topBox{
      padding-top: 64rem/75;
      height: 134rem/75;
      span{
        margin-left: 40rem/75;
        font-size: 35rem/75;
        color: #444;
        font-weight: 600;
      }
    }
    .fengeBar{
      height: 14rem/75;
      background: #f2f3f6;
    }
    .groupBox{
      .slotBox{
        img{
          width: 32rem/75;
          height: 32rem/75;
          margin-right: 14rem/75;
        }
        span{
          color: #666;
          padding-right:20px;
          font-size: 30rem/75;
        }
      }
    }
    .next-box{
      width: 100%;
      justify-content: center;
      margin-top: 282rem/75;
      div{
        width: 544rem/75;
        height: 90rem/75;
        line-height: 90rem/75;
        background: #ff485f;
        color: #fff;
        text-align: center;
        font-size: 35rem/75;
        border-radius: 8rem/75;
      }
    }
  }

</style>

